<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="消息中心" />
    </template>
    <view class="content">
      <scroll-view class="scroll-box"  v-if="list.length" scroll-y @scrolltolower="onScroll">
        <view class="list">
          <view
            @click="toDetail(index)"
            class="item flex flex-a"
            v-for="(item, index) in list"
            :key="index"
          >
            <image
            :src="require(`../../../assets/images/message/${item.type}.png`)"
          ></image>
          <view class="right f1">
            <view class="f1 flex flex-bt flex-a">
              <view class="c-90 fs-32 bold">{{ item.title }}</view>
              <text class="c-40 fs-24">{{ item.date }}</text>
            </view>
            <view class="desc ellipsis">{{ item.desc }}</view>
          </view>
          </view>
        </view>
      </scroll-view>
      <Empty v-if="!list.length && !isLoading"> </Empty>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getList } from "../../../api/message";
import Empty from "../../../compennts/empty/index.vue";
export default {
  components: {
    layout,
    pageHead,
    Empty,
  },
  data() {
    return {
      list: [],
      isLoading: true,
      page: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  mounted() {
    this.onGetList();
  },
  methods: {
    onScroll(){
      console.log(123);
      this.page.pageNum++
      this.onGetList(true)
    },
    onGetList(isMore) {
      this.isLoading = true;
      getList({
        ...this.page,
      })
        .then((res) => {
          console.log(res);
          let list = res.data?.records||[]
          if(isMore){
            this.list = [...this.list,...list]
          }else{
            this.list = list
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    toDetail(id) {
      uni.navigateTo({
        url: `/pages/mine/message/detail?id=${id}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  padding: 32rpx;
  height: 100%;
  background: #f7f8ff;
  .scroll-box{
    width: 100%;
    height: 100%;
  }
  .list {
    // height: 100%;
    // overflow: scroll;
    .item {
      padding: 32rpx;
      border-radius: 16rpx;
      background: #ffffff;
      margin-bottom: 32rpx;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      image {
        width: 96rpx;
        height: 96rpx;
        flex-shrink: 0;
        margin-right: 32rpx;
      }
      .desc {
        width: 100%;
        margin-top: 4rpx;
      }
      .right {
        width: calc(100% - 128rpx);
      }
    }
  }
}
</style>
